{extend name='public/base'/}
<!-- 归档标题内容页置空 -->
{block name='archive'}
{/block}
<!-- 主体 -->
{block name='list'}
<!-- 内容显示 -->
{volist name='posts' id='vo' empty='暂无文章'}
<div class="row" style="margin-bottom: 15px;">
    <div class="col-md-12">
        <h1 class="text-center">{$vo.title}</h1>
        <br />
        <div class="panel panel-default">
            <div class="panel-body">
                <span class="glyphicon glyphicon-time" aria-hidden="true"></span> {$vo.date} &nbsp;&nbsp;
                <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> {$vo.views} &nbsp;&nbsp;
                <span class="glyphicon glyphicon-folder-open " aria-hidden="true"></span> <a href="{$vo.cat_link}"
                    title="{$vo.cat_name}">{$vo.cat_name}</a>
            </div>
        </div>
        <p>{$vo.content|raw}</p>
        <br />
        {$option.statement|raw}
        <hr />
    </div>
</div>
{/volist}
{/block}

<!-- 分页留空 -->
{block name='pages'}
{/block}

<!-- 相关文章 -->
{block name='left'}
{if $relateds}
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">相关文章</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            {volist name='relateds' id='vo'}
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <a href="{$siteUrl}/detail/{$vo.id}.html" title="{$vo.title}"><img style="width:100%;height:95px;background-color:#f1f1f1;"
                            src="{$vo.img}" alt="{$vo.title}"></a>
                    <div class="caption">
                        <h3 style="margin:0"><a href="{$siteUrl}/detail/{$vo.id}.html"
                                title="{$vo.title}">{$vo.title}</a></h3>
                    </div>
                </div>
            </div>
            {/volist}
        </div>
    </div>
</div>
{/if}

<!-- 评论列表 -->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">评论列表</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-12" id="comment-area">
                <!-- 评论框 -->
                <form id="commentForm" style="position: relative">
                    {:token_field()}
                    <div class="form-group">
                        <textarea class="form-control" rows="3" name="comment" class="form-control" id="comment"
                            placeholder="评论内容..." {if !$user}disabled{/if} required></textarea>
                        {if !$user}
                        <p style="position: absolute;top: 30%;margin-top: -1rem;left: 50%;margin-left: -8rem;">
                            请 [<a href="#" data-toggle="modal" data-target=".bs-example-modal-sm">登录</a>] 后评论</p>
                        {/if}
                    </div>
                    <div class="form-group" style="position: relative;text-align: right;">
                        <input type="hidden" name="post_id" value="{$post_id}">
                        <button type="submit" class="btn btn-primary">
                            <span class="glyphicon glyphicon-send" aria-hidden="true"></span> 发表评论
                        </button>
                        <span class="tips" style="position: absolute;left: 0;top: .5rem;"></span>
                    </div>
                </form>

                <!-- 评论列表 -->
                {if $comments}
                {volist name='comments' id='comment'}
                <div class="panel panel-default">
                    <div class="panel-body">
                        <!-- 媒体对象 -->
                        <div class="media">
                            <div class="media-left">
                                <img class="media-object"
                                    style="width: 64px;height: 64px;background-color: #f1f1f1;border-radius: 50%;"
                                    src="{$comment.avatar ?: ''}"
                                    alt="avatar">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading"><strong>{$comment.name ?: '匿名'}</strong> <cite>说道：</cite></h4>
                                {$comment.comment|raw}
                                <p style="text-align: right;">
                                    <button type="button" data-id="{$comment.id}"
                                        class="btn btn-success btn-reply btn-sm media-right">
                                        <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> 回复
                                    </button>
                                </p>
                                <!-- 回复列表 -->
                                {if isset($comment['replys']) && $comment['replys']}
                                {volist name='comment.replys' id='reply'}
                                <hr>
                                <div class="media">
                                    <div class="media-left">
                                        <img class="media-object"
                                            style="width: 64px;height: 64px;background-color: #f1f1f1;border-radius: 50%;"
                                            src="{$reply.avatar ?: ''}"
                                            alt="avatar">
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">{$reply.name ?: '匿名'} 回复：</h4>
                                        {$reply.comment|raw}
                                    </div>
                                </div>
                                {/volist}
                                {/if}
                            </div>
                        </div>
                        <!-- 媒体对象End -->
                    </div>
                </div>
                {/volist}
                {/if}
            </div>
        </div>

        <!-- 评论分页 -->
        <div class="row">
            <div class="col-md-12 text-center">
                <nav aria-label="Page navigation">
                    {$comments|raw}
                </nav>
            </div>
        </div>
    </div>
</div>
{/block}